<template>
	<view class="container b-f">
		<!-- #ifdef APP-PLUS -->
		<view class="status-bar" :style="{ backgroundColor: page.style.titleBackgroundColor }"></view>
		<!-- #endif -->
		<diy-component :diyItems="items"></diy-component>
	</view>
</template>

<script>
import diyComponent from '@/components/diy/index.vue';
import Tools from '@/utils/Tools.js';
export default {
	components: {
		diyComponent
	},
	data() {
		return {
			// 页面参数
			options: {},
			// 页面元素
			items: {},
			page: { style: {} },
			scrollTop: 0
		};
	},
	onLoad(options) {
		// 当前页面参数
		this.options = options;
	},
	onShow() {
		// 加载页面数据
		this.getPageData();
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		// 获取首页数据
		this.getPageData(() => {
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		setShare() {
			// #ifdef H5
			this.$wechat.updateAppMessageShareData({
				title: this.page.params ? this.page.params.share_title : '', // 分享标题
				desc: '推荐你', // 分享描述
				link: Tools.getShareUrl(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: location.origin + '/static/logo/logo.png', // 分享图标
			});
			this.$wechat.onMenuShareTimeline({
				title: this.page.params ? this.page.params.share_title : '', // 分享标题
				link: Tools.getShareUrl(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: location.origin + '/static/logo/logo.png', // 分享图标
			});
			// #endif
		},
		/**
		 * 加载页面数据
		 */
		getPageData(callback) {
			this.$get(
				this.$api.getPage,
				{
					page_id: this.options.page_id || 0
				},
				res => {
					// 设置顶部导航栏栏
					this.setPageBar(res.data.page);
					// _this.setData(result.data);
					this.items = res.data.items;
					this.page = res.data.page;
					// 回调函数
					this.$nextTick(() => {
						// #ifdef H5
						this.$wechat.initJssdk(this.setShare());
						// #endif
						typeof callback === 'function' && callback();
					});
				}
			);
		},
		/**
		 * 设置顶部导航栏
		 */
		setPageBar(page) {
			// 设置页面标题
			uni.setNavigationBarTitle({
				title: page.params.title
			});
			// 设置navbar标题、颜色
			uni.setNavigationBarColor({
				frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
				backgroundColor: page.style.titleBackgroundColor
			});
		}
	}
};
</script>

<style>
page {
	background: #fff !important;
	/* #ifdef APP-PLUS */
	padding-top: var(--status-bar-height);
	/* #endif */
}
.status-bar {
	height: var(--status-bar-height);
	position: fixed;
	width: 750rpx;
	top: 0;
	z-index: 3;
}
</style>
